
CSS Level 1
- Replacement styles of Font tags and BRs.
- Width, height
- padding, margins
- background, border, fonts, list-styles
- alignments & whitespace.
CSS Level 2
- CSS Table display `display: table;`.
- Lack of support in IE until version 8
- Layout hacks with absolute positioning and floats
CSS Level 3
- Became Modularized
- Processing power (Selectors and Media Queries)
- Decorative effects (multiple backgrounds, rounded corners, border images, and CSS gradients)
- Typography and Internationalization (vertical text, custom fonts, and line-breaking and justification controls)
- Layout (inline-block, flexbox, grid)
CSS Multi-column Layout
Just like in newspapers. column-count: 3, column-width: 50px;, column-gap: 0, column-rule: thin solid black;
CSS Flexible Box Layout
You can use flexes absolutely, where the proportions you give are the proportions you get; or you can use them relatively, where leftover space is distributed after you've assigned sizes based on the content.
Grid Template Layout
You can create grid systems and control the positioning of grid items purely through CSS, a clear separation of concerns from HTML
”They work together, they don’t compete with each other”
| Flexbox | Grid |
|---|---|
| No Page Layouts | Page Layouts |
| UI elements | UI elements |
| One-dimensional / x-axis OR y-axis | Two-dimensional / x-axis AND y-axis |
| Content out | Layout in |
| Responsive (Fexible and Fluid) [flex-basis, flex-wrap] | Responsive (Fexible and Fluid) [minmax, fr] |
| Space distribution | Space distribution |
| No Gaps (Gutters) | Gaps (Gutters) |
| Support Logical Values | Support Logical Values |
| Horizontal Alignment for content only | Horizontal Alignment for all items and content |
| No Horizontal Alignment for individual items | Horizontal Alignment for individual items |
| Vertical Alignments for all items and individual items | Vertical Alignments for all items and individual items |
The new specification includes content distribution and self-alignment features that can be applied to block elements either in Flexbox or Grids.
Inline Axis is referred to as the Row Axis in the Grid specification and in Flexbox as the Main Axis. (justify-items and justify-self)
Block Axis is referred to as the Column Axis in the Grid specification and in Flexbox as the Cross Axis as it runs across the Main Axis. (align-self and align-items)
{}
@)) } @)) } Grid Garden Game Flexbox Froggy
gridbyexample flexbox from wesbos